

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>机器组别管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
   <link rel="stylesheet" href="layui/css/layui.css" media="all">
  <link rel="stylesheet" href="layui/css/admin.css" media="all">
  <style>
  	.layui-tree-skin-shihuang  .layui-tree-branch{
  		display: none;
  	}
  </style>
  
</head>
<body>
<div class="layui-container">  
  <div class="layui-card">
  <div class="layui-row">
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" >
      <div class="layui-card-header"><span style="font-weight: bold; font-size: 22px;">机器组别管理</span></div>
    </div>
   </div>
  <div class="layui-row layui-card-body ">
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md2" style="height: 500px; border: 1px solid gainsboro;">
      <ul id="tree" class="layui-tree-skin-shihuang"></ul>
    </div>
    <div class="layui-col-xs8 layui-col-sm8 layui-col-md10 ">
      <form class="layui-form" action="">

					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">组别名：</label>
							<div class="layui-input-inline">
								<input type="text" name="machineId" lay-verify="required" autocomplete="off" class="layui-input">
							</div>
						</div>
						
						<div class="layui-inline">
							<label class="layui-form-label">状态：</label>
							<div class="layui-input-inline">
								<select>
									<option value="">请选择状态</option>
									<option selected="">正常</option>
									<option>作废</option>
									
								</select>
							</div>
						</div>
					</div>
					
					<div class="layui-form-item">
						

						<div class="layui-inline" style="margin-left: 110px; ">
							<button class="layui-btn  select">查询</button>

							<button class="layui-btn  layui-btn-warm reset" type="reset">重置</button>
						</div>
					</div>
				</form>
			</div>

			<span style="font-weight: bold; font-size: 20px; margin-left: 30px; margin-top: 50PX;">机器列表</span>
			<table class="layui-hide" id="machine-list" lay-filter="demo" style="padding-left: -20px; width: 600px;"></table>

			<script type="text/html" id="barDemo">
				<!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
				<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<!--		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
			</script>
    </div>
   </div>
  </div>
   
 

 
    
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script src="layui/layui.js"></script>
		<script>
			layui.use(['form', 'table','tree'], function() {
				var form = layui.form,
					table = layui.table;
					

				table.render({
					elem: '#machine-list',
					height: 332,
					 cellMinWidth: 80,
					url: 'user.json' //数据接口
						,
					page: true //开启分页
						
					,cols: [
						[ //表头
							{
								field: 'id',
								title: '编号',
								width: 170,
								sort: true,
								fixed: 'left'
							}, {
								field: 'username',
								title: '组别名称 ',
								width: 170
							}, {
								field: 'sex',
								title: '所属组别',
								width: 170
							}, {
								field: 'city',
								title: '组别状态',
								width: 170
							}, {
								fixed: 'right',
								width: 205,
								align: 'center',
								toolbar: '#barDemo'
							}
						]
					]
//,cols: [[ //表头
//    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
//    ,{field: 'username', title: '用户名', width:80}
//    ,{field: 'sex', title: '性别', width:80, sort: true}
//    ,{field: 'city', title: '城市', width:80} 
//    ,{field: 'sign', title: '签名', width: 177}
//    ,{field: 'experience', title: '积分', width: 80, sort: true}
//    ,{field: 'score', title: '评分', width: 80, sort: true}
//    ,{field: 'classify', title: '职业', width: 80}
//    ,{field: 'wealth', title: '财富', width: 135, sort: true}
//    , {
//								fixed: 'right',
//							width: 165,
//								align: 'center',
//								toolbar: '#barDemo'
//						}
//  ]]
				});
				table.on('tool(demo)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data //获得当前行数据
						,
						layEvent = obj.event; //获得 lay-event 对应的值
					if(layEvent === 'detail') {
						layer.msg('查看操作');
					} else if(layEvent === 'del') {
						layer.confirm('真的删除行么', function(index) {
							obj.del(); //删除对应行（tr）的DOM结构
							layer.close(index);
							//向服务端发送删除指令
						});
					} else if(layEvent === 'edit') {
						//layer.msg('编辑操作');
							window.location.href="machine-ground-editor.html";
					}
				});

                layui.tree({
    elem: '#tree' //指定元素
    ,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
    ,click: function(item){ //点击节点回调
      layer.msg('当前节名称：'+ item.name + '<br>全部参数：'+ JSON.stringify(item));
      console.log(item);
    }
    ,nodes: [ //节点
    {
        name: '全部'
        ,id: 1
        ,spread: true
        ,children: [
          {
            name: '天河区'
            ,id: 11
            ,spread: true
            ,children: [
              {
                name: '珠江新城'
                ,id: 111
                
                
              }, {
                name: '五羊新城'
                ,id: 112
              }, {
                name: '天河城'
                ,id: 113
              }
            ]
          }, 
          {
            name: '海珠区'
            ,id: 21
            ,spread: false
            ,children: [
              {
                name: '客村立交'
                ,id: 211
                
                
              }, {
                name: '万胜围'
                ,id: 212
              }
            ]
            
          },
          {
            	name: '荔湾区'
            ,id: 3
            }
        ]
      }
      
    ]
  });
				

			});
			
			
		</script>
</body>
</html>
